<template>
  <div class="specialLocal-product">
      <div  v-if="contentHtml" class="product-list" :style="{paddingTop: paddingTop + 'px'}" v-html="contentHtml"></div>

      <div  style="paddingTop: 120px;"  v-if="!contentHtml">
        <not-data></not-data>
      </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import Scroll from '@/components/scroll/scroll'
import { isIphoneX } from '@/assets/js/brower'
import notData from '@/components/not-data/not-data.vue'

export default {
  data () {
    return {
      paddingTop: 0
    }
  },
  props: {
    contentHtml: {
      type: String,
      default: ''
    }
  },
  components: {
    Scroll,
    notData
  },
  created () {
    if (isIphoneX()) {
      this.paddingTop = 84
    } else {
      this.paddingTop = 70
    }
  },
  mounted () {
    this.$el.style.height = (window.innerHeight - 60) + 'px'
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'

.specialLocal-product{
  margin 0 15px
  overflow-x hidden
  overflow-y scroll
  .product-list{
    p {
      color #333
      font-size 15px
    }
    img {
      width 100% !important
    }
  }
}
</style>

<style lang='stylus' rel='stylesheet/stylus'>
.specialLocal-product{
  .product-list{
    p {
      img {
        width 100% !important
      }
    }
  }
}
</style>
